<template>
	<view class="complaint-add">
		<uni-forms :modelValue="formData" class="form-s">
			<uni-forms-item label="选择房间" :label-width="100" required>
				<view class="check-box">
					<input type="text" v-model="formData.roomFullName" @click="showRoomPicker = true" disabled placeholder="请选择房间"/>
					<image :src="$imgUrl + '/personal/next-icon.png'" class="check-icon" mode=""></image>
				</view>
			</uni-forms-item>
			<uni-forms-item label="服务类型" :label-width="100" required>
				<view class="check-box">
					<input type="text" v-model="serviceTypeName" @click="showTypePicker = true" disabled placeholder="请选择服务类型"/>
					<image :src="$imgUrl + '/personal/next-icon.png'" class="check-icon" mode=""></image>
				</view>
			</uni-forms-item>
			<uni-forms-item label="联系电话" :label-width="100">
				<view class="text-right">{{formData.customerMobile}}</view>
			</uni-forms-item>
			<uni-forms-item label="联系时间" :label-width="100">
				<uni-datetime-picker type="datetimerange" placeholder="请选择时间" :border="false" :hide-second="true" :start="nowTime" v-model="pickTime" @change="changeTime" />
			</uni-forms-item>
			<uni-forms-item class="uni-sug border-none">
				<view class="uni-sug-label">服务内容:</view>
				<view class="uni-sug-t">
					<textarea class="uni-sug-textarea" maxlength="300" v-model="formData.content" placeholder="请填写服务内容"></textarea>
					<text class="txt">{{formData.content&&formData.content.length || 0}}/300</text>
				</view>
			</uni-forms-item>
			<uni-forms-item class="uni-sug border-none">
				<view class="uni-sug-label">附件:<text class="txt">（仅支持图片JPEG、PNG格式上传，小于5M）</text></view>
				<view>
					<uploadImgs v-model="fileList"></uploadImgs>
				</view>
			</uni-forms-item>
		</uni-forms>
		<button type="default" class="submit-btn" :loading="isLoading" :disabled="isLoading" @click="submit">提交申请</button>
	</view>
	<!-- 选择房间 -->
	<u-picker :show="showRoomPicker" :columns="roomList" keyName="roomName" @cancel="showRoomPicker=false" @confirm="confirmRoom"></u-picker>
	<!-- 选择服务类型 -->
	<u-picker :show="showTypePicker" :columns="typeList" keyName="label" @cancel="showTypePicker=false" @confirm="confirmType"></u-picker>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue"
import { onLoad } from "@dcloudio/uni-app"
import { swoTicketCreate } from '@/common/API/bpm'
import { getRoomIdsById } from '@/common/API/contract'
import { getDictData } from '@/common/API/system'
import uploadImgs from '@/components/upload/uploadImgs.vue'
const formData = reactive({
	roomId:'',
	roomFullName:'',
	customerName:'',
	customerMobile:uni.getStorageSync('userPhone'),
	serviceType:'',
	serviceTimeStart:'',
	serviceTimeEnd:'',
	content:'',
	attachments:''
})
const fileList = ref<any>([])
const serviceTypeName = ref()
const showRoomPicker = ref(false)
const showTypePicker = ref(false)
const isLoading = ref(false)
const nowTime = ref(new Date().getTime())
onLoad(()=>{
	getRoomList()
	getTypeList()
})

const roomList = ref([])
const getRoomList = async ()=>{
	let res = await getRoomIdsById({})
	roomList.value.push(res)
}

const typeList = ref<any>([])
const getTypeList = async ()=>{
	let res = await getDictData({
		pageNo: 1,
		pageSize: 10,
		dictType: 'workorder_type'
	})
	typeList.value.push(res.list)
}

//选择房间
const confirmRoom = (e) => {
	showRoomPicker.value = false
	formData.roomId = e.value[0].roomId
	formData.roomFullName = e.value[0].roomName
}

//选择服务类型
const confirmType = (e) => {
	showTypePicker.value = false
	serviceTypeName.value = e.value[0].label
	formData.serviceType = e.value[0].value
}

// 选择时间
const pickTime = ref<any>([])
const changeTime = (e)=>{
	if(e.length){
		formData.serviceTimeStart = new Date(e[0]).getTime()
		formData.serviceTimeEnd = new Date(e[1]).getTime()
	}
}

// 上传图片
const submit = async ()=>{
	if(!formData.roomId){
		uni.showToast({
			title:'请选择房间',
			icon:'none'
		})
	}else if(!formData.serviceType){
		uni.showToast({
			title:'请选择服务类型',
			icon:'none'
		})
	}else{
		isLoading.value = true
		formData.attachments = fileList.value.toString()
		let res = await swoTicketCreate(formData)
		setTimeout(()=>{
			isLoading.value = false
			uni.navigateBack()
		},1500)
	}
}
</script>
<style>
	page{
		height: 100%;
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.complaint-add {
		padding-bottom: 20rpx;
		:deep(.uni-forms-item){
			border-bottom: 2rpx solid #f5f5f5;
			background: #fff;
			align-items: center;
			padding: 20rpx 32rpx;
			margin: 0;
			uni-input{
				font-size: 28rpx;
			}
			:deep(.uni-input-wrapper){
				text-align: right;
			}
			:deep(.uni-forms-item__label){
				color: rgba(77, 77, 77, 1);
				font-size: 32rpx;
			}
			.uni-date{
				text-align: right;
				.icon-calendar{
					display: none;
				}
				.uni-date__x-input{
					padding: 0;
					font-size: 24rpx;
				}
			}
			.check-icon{
				width: 16rpx;
				height: 28rpx;
				margin-left: 20rpx;
			}
			.check-box{
				flex: 1;
				text-align: right;
				display: flex;
				align-items: center;
				justify-content: flex-end;
			}
		}
		.uni-sug,.uni-forms-item{
			margin-bottom: 0;
			.uni-sug-label{
				color: rgba(77, 77, 77, 1);
				font-size: 32rpx;
				padding: 0 0 20rpx 0;
				.txt{
					font-size: 24rpx;
					color: rgba(153, 153, 153, 1);
				}
			}
			.uni-sug-textarea{
				width: 638rpx;
				height: 190rpx;
				font-size: 28rpx;
				padding: 24rpx;
			}
		}
		.uni-sug-t{
			width: 686rpx;
			height: 316rpx;
			font-size: 28rpx;
			position: relative;
			background: rgba(245, 245, 245, 1);
			.txt{
				position: absolute;
				right: 20rpx;
				bottom: 10rpx;
				color: rgba(153, 153, 153, 1);
				font-size: 24rpx;
			}
		}
		.border-none{
			border: none;
		}
		.submit-btn{
			width: 686rpx;
			margin: 94rpx 32rpx 40rpx 32rpx;
			border-radius: 200rpx;
			background: rgba(253, 150, 24, 1);
			color: #fff;
			border-radius: 200rpx;
			height: 84rpx;
			line-height: 84rpx;
			font-size: 28rpx;
		}
		.text-right{
			text-align: right;
		}
	}
</style>
